/*
 * @Author: your name
 * @Date: 2021-12-22 10:40:21
 * @LastEditTime: 2021-12-22 20:34:48
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day11  ts\app\src\component\Item.tsx
 */
import React, { ChangeEvent, Component } from 'react'
import {IState} from "../types/index.d"
import itemModule from "./Item.module.scss"
import {replay_list} from "../store/indexaction"

import {connect} from "react-redux"

interface IList{
    list:IState[],
    flag:boolean,
    replayList?:(id:string,comment:string)=>void
}

interface Istate{
    comment:string
}

class Item extends Component<IList,Istate> {

    state={
        comment:""
    }

    onReply(id:string,comment:string){
        // console.log(id);
        this.props.replayList&&this.props.replayList(id,comment)
        console.log(this.state.comment);
        console.log(id);
        
    }

    changeComment=(e:ChangeEvent)=>{
        this.setState({
            comment:(e.target as HTMLInputElement).value
        })
    }

    render() {
        let {list,flag}=this.props
        let {comment}=this.state
        return (
            <div>
                {
                    list&&list.length?list.map((item,index)=>{
                        return <div key={index} className={flag?itemModule.itemlist:''}>
                            <h3>{item.name}</h3>
                            <p>{item.context}</p>
                            <input type="text" value={comment} onChange={this.changeComment.bind(this)}/>
                            <p onClick={()=>{
                                this.onReply(item.id,comment)
                            }}>回复</p>
                            {item.child&&item.child.length>0?(<Item list={item.child} flag={true}/>):null}
                        </div>
                    }):<div>暂无数据</div>
                }
            </div>
        )
    }
}

export default connect((state)=>{
    console.log(state);
    
    return {
        ...state
    }
},(dispatch)=>{
    return {
        replayList(id:string,comment:string){
            dispatch(replay_list(id,comment))
        }
    }
})(Item)
